<template>
    <div  v-if="store.auth.role=='学生'">
        <el-button type="success" @click="one">生成个人成绩图</el-button>
    </div>
    <div v-if="store.auth.role!='学生'">
    <el-button type="success" @click="drawnum">按照挂科数目统计</el-button>
    <el-button type="success" @click="dialogVisible=true">按照个人成绩统计</el-button>
        <el-button type="success" @click="dialogVisible1=true" v-if="store.auth.role=='管理员'">按照学院统计</el-button>
        <el-button type="success" @click="dialogVisible2=true">按照专业统计</el-button>
        <el-button type="success" @click="dialogVisible3=true">按照年级对比统计</el-button>
        <el-button type="success" @click="dialogVisible4=true">按照专业预警程度统计</el-button>
    </div>
    <div style="margin-top:20px" v-if="store.auth.role=='管理员'">
        <el-button type="success" @click="outcollege">按照学院预警数据导出</el-button>
    </div>
    <div style="margin-top:20px" v-if="store.auth.role!='学生'">
        <el-button type="success" @click="outmajor">按照学院年级预警数据导出</el-button>
    </div>

    <el-dialog title="输入需要查询的学生学号" v-model="dialogVisible">
        <el-form :model="stu">
            <el-input placeholder="学号" v-model="stu.id" type="text"/>
            <el-button type="warning" @click="dialogVisible=false">取消</el-button>
            <el-button type="primary" @click="drawline">确认</el-button>
        </el-form>
    </el-dialog>
    <el-dialog title="输入需要查询的学院信息" v-model="dialogVisible1">
        <el-form :model="stu1">
            <el-select v-model="stu2.grade" placeholder="请选择年级" clearable>
                <el-option label="2020级" value="2020级" />
                <el-option label="2021级" value="2021级" />
                <el-option label="2022级" value="2022级" />
                <el-option label="2023级" value="2023级" />
                <el-option label="2024级" value="2024级" />
            </el-select>
            <el-input placeholder="学期(格式：2021-2022-1)" v-model="stu2.term" type="text"/>
            <el-button type="warning" @click="dialogVisible1=false">取消</el-button>
            <el-button type="primary" @click="drawcollege">确认</el-button>
        </el-form>
    </el-dialog>
    <el-dialog title="输入需要查询的专业信息" v-model="dialogVisible2">
        <el-form :model="stu1">
            <el-select v-model="stu1.college" placeholder="请选择学院" clearable>
                <el-option label="数学与计算机学院" value="数学与计算机学院" />
                <el-option label="文学院" value="文学院" />
                <el-option label="法学院" value="法学院" />
                <el-option label="智能制造学院" value="智能制造学院" />
                <el-option label="生化学院" value="生化学院" />
            </el-select>
            <el-select v-model="stu1.grade" placeholder="请选择年级" clearable>
               <el-option label="2020级" value="2020级" />
                <el-option label="2021级" value="2021级" />
                <el-option label="2022级" value="2022级" />
                <el-option label="2023级" value="2023级" />
                <el-option label="2024级" value="2024级" />
            </el-select>
            <el-input placeholder="学期(格式：2021-2022-1)" v-model="stu1.term" type="text"/>
            <el-button type="warning" @click="dialogVisible2=false">取消</el-button>
            <el-button type="primary" @click="drawmajor">确认</el-button>
        </el-form>
    </el-dialog>
    <el-dialog title="输入需要查询的年级信息" v-model="dialogVisible3">
        <el-form :model="stu3">
            <el-select v-model="stu3.college" placeholder="请选择学院" clearable>
                <el-option label="数学与计算机学院" value="数学与计算机学院" />
                <el-option label="文学院" value="文学院" />
                <el-option label="法学院" value="法学院" />
                <el-option label="智能制造学院" value="智能制造学院" />
                <el-option label="生化学院" value="生化学院" />
            </el-select>
            <el-input placeholder="学期(格式：2021-2022-1)" v-model="stu3.term" type="text"/>
            <el-button type="warning" @click="dialogVisible3=false">取消</el-button>
            <el-button type="primary" @click="drawgrade">确认</el-button>
        </el-form>
    </el-dialog>
    <el-dialog title="输入需要查询的专业预警信息" v-model="dialogVisible4">
        <el-form :model="stu4">
            <el-select v-model="stu4.college" placeholder="请选择学院" clearable>
                <el-option label="数学与计算机学院" value="数学与计算机学院" />
                <el-option label="文学院" value="文学院" />
                <el-option label="法学院" value="法学院" />
                <el-option label="智能制造学院" value="智能制造学院" />
                <el-option label="生化学院" value="生化学院" />
            </el-select>
            <el-select v-model="stu4.grade" placeholder="请选择年级" clearable>
                <el-option label="2020级" value="2020级" />
                <el-option label="2021级" value="2021级" />
                <el-option label="2022级" value="2022级" />
                <el-option label="2023级" value="2023级" />
                <el-option label="2024级" value="2024级" />
            </el-select>
            <el-input placeholder="学期(格式：2021-2022-1)" v-model="stu4.terms" type="text"/>
            <el-button type="warning" @click="dialogVisible4=false">取消</el-button>
            <el-button type="primary" @click="drawmajors">确认</el-button>
        </el-form>
    </el-dialog>
    <div
            id="myChart1"
            :style="{width: '1000px', height: '300px',background:'#ffffff'}"
    ></div>
</template>
<script setup>
import { ref,onMounted } from 'vue'
import {ElMessage} from 'element-plus'
import { get,post } from '@/utils/request.js'
import { reactive } from 'vue'
import * as echarts from 'echarts'
import {userStore} from '@/stores/counter.js'

const store=userStore()
const dialogVisible=ref(false)
const dialogVisible1=ref(false)
const dialogVisible2=ref(false)
const dialogVisible3=ref(false)
const dialogVisible4=ref(false)
const datas=ref([])
const course=ref([])
const text=ref('')
const type=ref('')
const xside=ref('')
const yside=ref('')
const test=ref('')

const stu = reactive({
id:''
})

const stu1 = reactive({
college:'',
grade:'',
term:''
})

const stu2 = reactive({
college:'',
grade:'',
term:''
})

const stu3 = reactive({
college:'',
term:''
})

const stu4 = reactive({
college:'',
grade:'',
terms:''
})

const outmajor=()=>{
window.open('http://localhost:8080/show/out')
}
const outcollege=()=>{
window.open('http://localhost:8080/show/out1')
}

const draw = (datax, datay, text, type, xside, yside) => {
  // 获取DOM元素
  const chartDom = document.getElementById("myChart1");
  if (!chartDom) return;

  // 获取并销毁旧实例
  let myChart = echarts.getInstanceByDom(chartDom);
  if (myChart) {
    myChart.dispose();
    if (myChart.getOption()) {
      myChart.getOption().series = [];
      myChart.getOption().xAxis = [];
      myChart.getOption().yAxis = [];
    }
    myChart = null;
  }

  // 重新初始化
  myChart = echarts.init(chartDom);

  // 创建新配置
  let options = {
    title: {
      text: text.value,
      left: "center",
      tooltip: {},
    },
    xAxis: {
      name: xside.value,
      data: datay.value,
      axisLabel: {
        interval: 0,
        rotate: '45'
      }
    },
    yAxis: {
      name: yside.value
    },
    series: [{
      data: datax.value,
      type: type.value,
      label: {
        show: true,
        position: 'bottom',
        textStyle: {
          fontSize: 15
        }
      }
    }],
    dataZoom: [{
      type: 'slider',
      start: 0,
      end: 10 // 只显示部分数据
    }]
  };

  // 移除旧的resize监听器
  const resizeHandler = () => myChart.resize();
  window.removeEventListener('resize', resizeHandler);

  // 添加新的resize监听器
  window.addEventListener('resize', resizeHandler);

  // 设置新配置（不合并旧配置）
  myChart.setOption(options, true);
}


const one=()=>{
 if(store.auth.role=='学生'){
get('/getallscore',(message)=>{
     let data=[]
     test.value=store.auth.user
   data=message.filter(item => item.name ===store.auth.user )
   console.log(data)
   for(let i=0;i<data.length;i++){
datas.value[i]=data[i].fscore
course.value[i]=data[i].course
}
text.value='个人成绩情况分析'
type.value='line'
xside.value='科目'
yside.value='成绩'
draw(datas,course,text,type,xside,yside)
    },(message)=>{
    ElMessage.warning(message)
    })
    }
    }

const drawline=()=>{
post('/getdatabyone',{
id:stu.id
},(message)=>{
dialogVisible.value=false
for(let i=0;i<message.length;i++){
datas.value[i] = message[i].fscore
course.value[i]=message[i].course
}
text.value='个人成绩情况分析'
type.value='line'
xside.value='科目'
yside.value='成绩'
draw(datas,course,text,type,xside,yside)
stu.id=''
},(message)=>{
dialogVisible.value=false
stu.id=''
ElMessage.warning(message)
})
}

const drawnum=()=>{
 get('/getnum',(message)=>{
datas.value = Object.keys(message)
course.value= Object.values(message)
text.value='挂科情况分析'
type.value='bar'
xside.value='姓名'
yside.value='数目'
draw(course,datas,text,type,xside,yside)
    })
}

const drawcollege=()=>{
post('/show/college',{
grade:stu2.grade,
term:stu2.term
},(message)=>{
dialogVisible1.value=false
datas.value = Object.values(message)
console.log(datas.value)
course.value=Object.keys(message)
text.value=('专业预警情况分析-1'+stu2.term)
type.value='line'
xside.value='学院'
yside.value='预警个数'
draw(datas,course,text,type,xside,yside)
},(message)=>{
dialogVisible1.value=false
ElMessage.warning(message)
})
}

const drawmajor=()=>{
post('/show/major',{
college:stu1.college,
grade:stu1.grade,
term:stu1.term
},(message)=>{
dialogVisible2.value=false
datas.value = Object.values(message)
course.value=Object.keys(message)
text.value='专业预警情况分析-'+stu1.term
type.value='line'
xside.value='专业'
yside.value='预警个数'
draw(datas,course,text,type,xside,yside)
},(message)=>{
dialogVisible2.value=false
ElMessage.warning(message)
})
}

const drawgrade=()=>{
post('/show/grade',{
college:stu3.college,
term:stu3.term
},(message)=>{
dialogVisible3.value=false
datas.value = Object.values(message)
console.log(datas.value)
course.value=Object.keys(message)
text.value='年级预警情况分析'+stu3.term
type.value='line'
xside.value='年级'
yside.value='预警个数'
draw(datas,course,text,type,xside,yside)
},(message)=>{
dialogVisible3.value=false
ElMessage.warning(message)
})
}

const drawmajors=()=>{
post('/show/majors',{
college:stu4.college,
grade:stu4.grade,
terms:stu4.terms
},(message)=>{
dialogVisible4.value=false
datas.value = Object.values(message)
console.log(datas.value)
course.value=Object.keys(message)
text.value='专业预警程度情况分析-'+stu4.terms
type.value='line'
xside.value='预警程度'
yside.value='预警个数'
draw(datas,course,text,type,xside,yside)
},(message)=>{
dialogVisible4.value=false
ElMessage.warning(message)
})
}

</script>
<style scoped>
</style>